<template>
  <div>
    <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            早安，骚年，祝你开心每一天！
          </div>
          <div style="display: flex">
            <el-card style="width: 30%; margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>毕设2024</span>
              </div>
              <div>
                2024毕设正式开始了！
                <div style="margin-top: 20px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>

            <el-card style="width: 70%;">
              <div slot="header" class="clearfix">
                <span>用户的数据</span>
              </div>
              <div>
                <el-table :data="users">
                    <el-table-column label="ID" prop="id"></el-table-column>
                    <el-table-column label="用户名" prop="username"></el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="地址" prop="address"></el-table-column>
                    <el-table-column label="图片上传">
                      <template slot-scope="scope">
                        <el-upload
                          :action="$baseUrl + '/file/upload'"
                          :headers="{ token: user.token }"
                          :on-success="(row, file, fileList) => handleTabFileUpload(scope.row, file, fileList)"
                          :show-file-list="false"
                          :preview-src-list="[scope.row.avatar]"
                        >
                          <el-button size="mini" type="primary">点击上传</el-button>
                        </el-upload>
                      </template>
                    </el-table-column>
                    <el-table-column label="文件预览" align="center">
                      <template v-slot="scope">
                        <div style="display: flex; justify-content: center; align-items: center;">
                          <el-image 
                          v-if="scope.row.avatar"
                          style="width: 50px;height: 50px;" 
                          :src="scope.row.avatar"  
                          ></el-image>
                          <div style="margin-left: 15px;">
                            <el-button v-if="scope.row.avatar" size="mini" @click="preview(scope.row.avatar)">预览</el-button>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>

          <div style="display: flex; margin: 15px 0">
            <el-card style="width: 50%; margin-right: 10px">
              <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
              <el-timeline style="padding: 0">
                <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time" placement="top">
                  <el-card>
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.content }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="no_title" v-if="notices.length == 0">暂无公告</div>
            </el-card>

            <el-card style="width: 50%">
              <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item  v-for="(item, index) in notices" :key="item.id" :name="index + ''">
                  <template slot="title">
                    <h4>{{ item.title }}</h4>
                  </template>
                  <div>{{ item.content }}</div>
                </el-collapse-item>
              </el-collapse>
              <div class="no_title" v-if="notices.length == 0">暂无公告</div>
            </el-card>
          </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {

  data() {
    return {
      users: [],
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      url: '',
      urls: [],
      notices: [],
      activeName: '0'
    }
  },
  created() {
    this.loadNotice()
  },
  mounted() {
    request.get(this.$baseUrl +'/user/selectAll').then(res => {
      console.log(res)
      this.users = res.data?.length >= 2 ? res.data.slice(0,2) : []
    })
  },
  methods: {
    loadNotice() {
      this.$request.get('/notice/selectUserData').then(res => {
        //this.notices = res.data
        const { code, data, msg } = res
        if (code == 200) {
          data.forEach(item => {
            if (item.open) {
              this.notices.push(item)
            }
          });
        } else {
          this.$message.error(msg)
        }
      })
    },
    preview(url) {
      window.open(url);
    },
    //多文件上传
    handleMangFileUpload(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.urls = fileList.map(item => item.response?.data)
      console.log(this.urls);
      
    },
    handleTabFileUpload(row,file,fileList) {
      console.log(row);
      console.log(file);
      console.log(fileList);
      row.avatar = file.response.data;

      //修改数据接口
      request.put('/user/update',row).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('图片上传成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleFileUpload(response, file, fileList) {
      console.log(response, file, fileList);
    },
  }
}
</script>

<style>
.no_title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 50px 0;
}
</style>